<template>
  <div class="container app-container">
    <div class="company-title">
      <div class="company-title-box">
        <div class="company-title-box__title">
          <h1>{{ detail ? detail.projectName : '--' }}</h1>
          <!--   0-未认证,1-已认证,2-审核中,3-认证失败      -->
          <el-tag v-if="detail.authStatus === 0" type="info"> {{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 1" type="success">{{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 2" type="warning">{{ detail.authStatusStr }}</el-tag>
          <el-tag v-if="detail.authStatus === 3" type="danger"> {{ detail.authStatusStr }}</el-tag>
        </div>
        <div class="company-title-box__credit">
          项目编号：{{ detail ? detail.projectNo : '--' }}
        </div>
      </div>
      <div class="company-title-box-btn">
        <el-button v-if="detail.authStatus === 0" size="mini" @click="handleAuth(detail.id)">
          发起认证
        </el-button>
        <el-button v-if="detail.authStatus === 3" size="mini" @click="updateProject(detail.id)"
          >编辑项目</el-button
        >
      </div>
    </div>

    <div class="company-context-box">
      <el-descriptions :column="1" title="| 基础信息" :label-style="{ marginLeft: '40px' }">
        <el-descriptions-item label="项目名称">
          {{ detail.projectName }}
        </el-descriptions-item>
        <el-descriptions-item label="归属企业">
          {{ detail.companyName }}
        </el-descriptions-item>
        <el-descriptions-item label="项目类型">
          {{ detail.projectTypeStr }}
        </el-descriptions-item>
        <el-descriptions-item label="项目起止时间">
          {{ detail.startDate }} 至 {{ detail.endDate }}
        </el-descriptions-item>
        <el-descriptions-item label="项目地址">
          <el-descriptions :column="1" :colon="false">
            <el-descriptions-item>
              {{ detail.province }}{{ detail.city }}{{ detail.district }}
              {{ detail.projectAddress }}
            </el-descriptions-item>
            <el-descriptions-item>
              <div id="baidu-map-container" style="width: 500px; height: 300px"></div>
            </el-descriptions-item>
          </el-descriptions>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ detail.remark }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { getProjectDetail } from '@/api/project';

export default {
  data() {
    return {
      detail: {
        id: null, // id
        projectName: '', // 项目名称
        projectType: null, // 项目类型
        projectTypeStr: '', // 项目类型名称
        companyId: null, // 归属企业
        companyName: '', // 归属企业名称
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        projectAddress: '', // 项目地址
        remark: '', // 备注
        status: null, // 状态
        statusStr: '', // 状态名称
        province: '', // 省
        city: '', // 市
        district: '', // 区
        longitude: '', // 经度
        latitude: '', //   纬度
      },
    };
  },
  mounted() {
    this.getProjectDetail();
  },
  methods: {
    // 获取船舶详情
    getProjectDetail() {
      getProjectDetail(this.$route.query.id).then((res) => {
        this.detail = res.data;
        this.initBaiduMap();
      });
    },
    /**
     * 编辑
     * @param id
     */
    updateProject(id) {
      this.$router.push({ name: 'SaveProject', query: { id: id } });
    },
    handleAuth() {
      alert('发起认证，功能未实现');
    },
    // 初始化百度地图
    initBaiduMap() {
      this.$nextTick(() => {
        /** 初始化地图Start */
        // eslint-disable-next-line no-undef
        var map = new BMap.Map('baidu-map-container'); // 创建地图实例
        // eslint-disable-next-line no-undef
        var point = new BMap.Point(this.detail.longitude, this.detail.latitude); // 设置中心点坐标
        map.centerAndZoom(point, 13); // 地图初始化，同时设置地图展示级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.clearOverlays(); // 移除地图上的标注
        // eslint-disable-next-line no-undef
        var marker = new BMap.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        /** 初始化地图End */
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.company-context-box {
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
}

.company-title {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 10px;
  .company-title-box {
    .company-title-box__title {
      h1 {
        margin: 0;
      }
      display: flex;
      gap: 32px;
      margin-bottom: 10px;
    }
  }
}

.container {
  background-color: rgb(240, 243, 246);
}
</style>
